<template>
  <view class="container">
    <view class="major-type-box">
      <view class="item-box"
            @tap="tapItem"
            data-index="0">
        <view class="item">
          <view class="item-label"
                :class="{'item-label-active': isShowBox[0]}">文科综合</view>
          <view class="item-line"
                :class="{'item-line-active': isShowBox[0]}"></view>
        </view>
      </view>
      <view class="item-box"
            @tap="tapItem"
            data-index="1">
        <view class="item">
          <view class="item-label"
                :class="{'item-label-active': isShowBox[1]}">理科综合</view>
          <view class="item-line"
                :class="{'item-line-active': isShowBox[1]}"></view>
        </view>
      </view>
    </view>
    <view class="list-box"
          v-show="isShowBox[0]"
          @tap="goDetail(item.enrollId)"
          v-for="(item,index) in dataWList"
          :key="index">
      <view class="list-item-box">
        <view class="list-item-label">{{item.majorName}}</view>
        <view class="list-item-num">{{item.studentNum}}人</view>
      </view>
    </view>
    <view class="list-box"
          v-show="isShowBox[1]"
          @tap="goDetail(item.enrollId)"
          v-for="(item,index) in dataLList"
          :key="index">
      <view class="list-item-box">
        <view class="list-item-label">{{item.majorName}}</view>
        <view class="list-item-num">{{item.studentNum}}人</view>
      </view>
    </view>
  </view>
</template>

<script>
import { http } from '../../utils'

export default {
  data () {
    return {
      curIndex: 0,
      isShowBox: [true, false],
      paramWs: {
        id: '',
        year: '',
        batch: '',
        mType: 1
      },
      paramLs: {
        id: '',
        year: '',
        batch: '',
        mType: 2
      },
      total: 0,
      dataWList: [],
      dataLList: []
    }
  },
  onLoad (options) {
    this.paramWs.id = options.id;
    this.paramWs.year = options.year;
    this.paramWs.batch = options.batch;
    this.paramWs.mType = 1;
    this.fetchWList(this.paramWs);

    this.paramLs.id = options.id;
    this.paramLs.year = options.year;
    this.paramLs.batch = options.batch;
    this.paramLs.mType = 2;
    this.fetchLList(this.paramLs);

  },
  methods: {
    tapItem (e) {
      this.isShowBox[this.curIndex] = false
      this.curIndex = e.currentTarget.dataset.index
      this.isShowBox[this.curIndex] = true

      if (this.isShowBox[0]) {
        this.fetchWList(this.paramWs);
      }
      if (this.isShowBox[1]) {
        this.fetchLList(this.paramLs);
      }
    },
    fetchWList (data) {
      http('/enrollment-plan/all',
        data, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          this.dataWList = res.data.data.list;
        }).catch(
          err => {
            console.error(err)
          })
    },
    fetchLList (data) {
      http('/enrollment-plan/all',
        data, {
        hideLoading: false,
        hideMsg: true,
        method: 'POST'
      }).then(
        res => {
          this.dataLList = res.data.data.list;
        }).catch(
          err => {
            console.error(err)
          })
    },
    goDetail (id) {
      uni.navigateTo({
        url: '/pages/enrollment_plan_detail/enrollment_plan_detail?id=' + id
      })
    }

  }
}
</script>

<style>
page {
  background-color: #eeeeee;
}

.container {
  width: 750rpx;
  height: auto;
}

.major-type-box {
  width: 750rpx;
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-end;
}

.item-box {
  width: 375rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-label {
  font-size: 28rpx;
  height: 46rpx;
}

.item-label-active {
  color: #5683ec;
}

.item-line {
  width: 56rpx;
  height: 4rpx;
  background-color: #ffffff;
}

.item-line-active {
  background-color: #5683ec;
}

.list-box {
  background-color: #ffffff;
  width: 750rpx;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  font-size: 28rpx;
}

.list-item-box {
  width: 690rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 90rpx;
  border-bottom: solid 1rpx #f5f5f5;
}
</style>
